<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta charset="UTF-8">
	<title>等待付款</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no,email=no,adress=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />  
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="{THEME_PATH}styles/swiper.min.css">
	<link rel="stylesheet" href="{THEME_PATH}styles/reset.css">
	<link rel="stylesheet" href="{THEME_PATH}styles/common.css">
	<link rel="stylesheet" href="{THEME_PATH}styles/style.css">
	<script src="{THEME_PATH}js/jquery-1.8.3.min.js"></script>
	<script src="{THEME_PATH}js/swiper.min.js"></script>
	<script src="/statics/js/layer/layer.js"></script>
	
</head>
<body>
	<!-- S header -->
	<header>
		<a href="<?php echo U('index?type=2'); ?>" class="headerL iconfont">&#xe69f;</a>
		<h1>交易详情</h1>
	</header>
	<!-- E header -->

	<!-- S 交易状态 -->
	<dl class="my-deal-condition">
		<dt><img src="{THEME_PATH}images/icon-deal1.png" alt="" width="21">等待付款</dt>
		<!-- <dd><img src="{THEME_PATH}images/icon-deal2.png" alt="" ></dd> -->
		<dd id="time"></dd>
	</dl>
	<!-- E 交易状态 -->

	<!-- S 会员信息 -->
	<h2 class="my_deal_h2">对方信息</h2>
	<dl class="my_deal_user">
		<dt><img src="<?php echo $info['photo'] ? $info['photo'] : THEME_PATH.'images/user-my.png';?>" alt="" width="50" class="user_photo"></dt>
		<dd><?php echo $info['real_name'];?></dd>
	</dl>
	<ul class="my_deal_msg_items">
		<li class="flex flex-pack-justify">
			<div>真实姓名</div>
			<div class="asidR"><?php echo $info['real_name'];?></div>
		</li>		
		<li class="flex flex-pack-justify">
			<div>电话</div>
			<div class="asidR"><?php echo $info['username']; ?>8 <img src="{THEME_PATH}images/icon-deal3.png" alt="" width="12" class="icon-deal3"></div>
		</li>
		<li class="flex flex-pack-justify">
			<div>微信</div>
			<div class="asidR"><?php echo $info['wx_account']; ?> <img src="{THEME_PATH}images/icon-deal4.png" alt="" width="12.5" class="icon-deal4"></div>
		</li>
		<li class="flex flex-pack-justify">
			<div>支付宝</div>
			<div class="asidR"><?php echo $info['alipay_account']; ?><img src="{THEME_PATH}images/icon-deal4.png" alt="" width="12.5" class="icon-deal4"></div>
		</li>
	</ul>
	<!-- E 会员信息 -->
	<!-- S 交易信息 -->
	<h2 class="my_deal_h2">订单信息</h2>
	<ul class="my_deal_msg_items">
		<li class="flex flex-pack-justify">
			<div>数量</div>
			<div class="asidR"><?php echo $info['number']; ?> GF</div>
		</li>
		<li class="flex flex-pack-justify">
			<div>单价</div>
			<div class="asidR"><?php echo $info['price']; ?> CNY</div>
		</li>
		<li class="flex flex-pack-justify">
			<div>总价</div>
			<div class="asidR"><?php echo $info['all_price']; ?> CNY</div>
		</li>
		<li class="flex flex-pack-justify">
			<div>时间</div>
			<div class="asidR"><?php echo $info['time'];?></div>
		</li>
	</ul>
	<!-- E 交易信息 -->
	<a href="javascript:;" class="btn deal-btn" onclick="payment()">前去付款</a>

	<div class="popup_shade"></div>
	<!-- S 付款弹窗 -->
	<div class="payment_popUp">
		<div class="flex flex-pack-justify card-wrap">
			<label>储蓄卡</label>
			<div class="numb"><?php echo $bank_info['bank_type'];?>（<?php echo substr($bank_info['bank_number'],-4,4); ?>）</div>
		</div>
		<dl class="money">
			<dt>￥</dt>
			<dd><?php echo $info['all_price'];?></dd>
		</dl>
		<div class="transaction-password">
			<h3>请输入交易密码</h3>
			<div class="password-wrap flex flex-pack-justify">
				<input type="password" maxlength="1" name="password_1" onkeyup="this.value=this.value.replace(/\D/g,'')">
				<input type="password" maxlength="1" name="password_2" onkeyup="this.value=this.value.replace(/\D/g,'')">
				<input type="password" maxlength="1" name="password_3" onkeyup="this.value=this.value.replace(/\D/g,'')">
				<input type="password" maxlength="1" name="password_4" onkeyup="this.value=this.value.replace(/\D/g,'')">
				<input type="password" maxlength="1" name="password_5" onkeyup="this.value=this.value.replace(/\D/g,'')">
				<input type="password" maxlength="1" name="password_6" onkeyup="this.value=this.value.replace(/\D/g,'')">
			</div>
		</div>
		<a href="javascript:;" class="btn" id="btn">提交</a>
	</div>
	<!-- E 付款弹窗 -->
	<script type="text/javascript">
        $(function(){
            countDown(<?php echo $order_info['time']?>);
        })
    </script>
	
	<script>

		//付款
		function payment(){
			$(".popup_shade,.payment_popUp").show();
		}
		
		$('#btn').click(function(){
		
			var password_1 = $(" input[ name='password_1' ] ").val();
			var password_2 = $(" input[ name='password_2' ] ").val();
			var password_3 = $(" input[ name='password_3' ] ").val();
			var password_4 = $(" input[ name='password_4' ] ").val();
			var password_5 = $(" input[ name='password_5' ] ").val();
			var password_6 = $(" input[ name='password_6' ] ").val();
			if(password_1 === ''||password_2 === '' || password_3 === ''|| password_4 === '' || password_5 === '' || password_6 === ''){
				layer.msg('不能为空');
			}
			var password = password_1+""+password_2+""+password_3+""+password_4+""+password_5+""+password_6;
			$.ajax({
				url:"/index.php/?m=user&c=order&a=upd_trade_status",
				type:'post',
				data:{password:password,id:<?php echo $order_info['id'];?>},
				dataType:'json',
				success:function(data){
					if(data.status ==0){
						layer.msg(data.info);
						setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							window.location.reload();//页面刷新
						},1000);
					}else{
						layer.msg(data.info);
						setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							location.href = "/index.php?m=user&c=order&a=order_detail&id="+<?php echo $order_info['id']; ?>;
						},1000);
						// $("#shade,#success").show();
						// layer.close(index);
						return;
					}
				}
			});
		})



		function countDown(times){
			// console.log(times);
			var timer=null;
			timer=setInterval(function(){
				var day=0,
				hour=0,
				minute=0,
				second=0;//时间默认值
				if(times > 0){
				// day = Math.floor(times / (60 * 60 * 24));
				hour = Math.floor(times / (60 * 60)) - (day * 24);
				minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
				second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
				}
				// if (day <= 9) day = '0' + day;
				if (hour <= 9) hour = '0' + hour;
				if (minute <= 9) minute = '0' + minute;
				if (second <= 9) second = '0' + second;
				$("#time").html("倒计时&nbsp;"+hour+":"+minute+":"+second);
				// console.log(hour+":"+minute+":"+second);
				times--;
			},1000);
			if(times<=0){
				$("#time").html("倒计时&nbsp;00:00:00");
				clearInterval(timer);
			}
		}

	</script>
	<script>
		function bindKeyEvent() {
			var password = document.querySelector(".password-wrap");
			password.onkeyup = function (event) {
				event = event || window.event;
				tabForward(event);
			}
		 
			password.onkeydown = function (event) {
				tabBackward(event);
			}
		}
		 
		 
		function tabForward(event) {
			var target = event.target || window.event.srcElement;
			if(target.nextElementSibling && event.keyCode != 8) {
				target.nextElementSibling.focus();
			}
		}
		 
		 
		function tabBackward(event) {
			var target = event.target || window.event.srcElement;
			if(target.previousElementSibling && 
				event.keyCode == 8 &&
				target.value == "") {
				target.previousElementSibling.value = "";
				target.previousElementSibling.focus();
			}
		}
		 
		window.onload = function (event) {
			bindKeyEvent();
		}
	</script>
</body>
</html>